<template>
  <div>
    <div class="form-header">
      <el-page-header @back="$router.go(-1)">
        <div slot="content" class="header-content">
          <div>{{ isEdit ? "编辑课程" : "新增课程" }}</div>
        </div>
      </el-page-header>
      <div>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
    <el-form label-width="140px" ref="course-form" :model="model" :rules="rules">
      <el-card shadow="never" class="card-content">
        <div slot="header">基本信息</div>
        <el-form-item label="名称" prop="courseName">
          <el-input
            v-model="course.courseName"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="brief">
          <el-input
            v-model="course.brief"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="讲师名称" prop="teacherName">
          <el-input
            v-model="course.teacherDTO.teacherName"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input
            v-model="course.teacherDTO.position"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="讲师简介" prop="description">
          <el-input
            v-model="course.teacherDTO.description"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="课程概述" prop="previewFirstField">
          <div style="display: flex">
            <div style="flex: 1; margin-right: 30px">
              <el-input
                v-model="course.previewFirstField"
                maxlength="20"
                show-word-limit
              ></el-input>
            </div>
            <div style="flex: 1">
              <el-input
                v-model="course.previewSecondField"
                maxlength="20"
                show-word-limit
              ></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="课程封面">
          <course-image v-model="course.courseListImg" :limit="150" />
        </el-form-item>
        <el-form-item label="解锁封面">
          <course-image :limit="150" v-model="course.courseImgUrl" />
        </el-form-item>
        <el-form-item label="课程排序" prop="sortNum">
          <el-input v-model.number="course.sortNum" type="number">
            <template slot="append">数字控制排序，数字越大越靠后</template>
          </el-input>
        </el-form-item>
      </el-card>
      <el-card shadow="never" class="card-content">
        <div slot="header">销售信息</div>
        <el-form-item label="售卖价格" prop="discounts">
          <el-input v-model.number="course.discounts" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品原价">
          <el-input v-model.number="course.price" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model.number="course.sales" type="number">
            <template slot="append">单</template>
          </el-input>
        </el-form-item>
        <el-form-item label="活动标签">
          <el-input
            v-model="course.discountsTag"
            maxlength="4"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-card>
      <el-card shadow="never" class="card-content">
        <div slot="header">秒杀活动</div>
        <el-form-item label="限时秒杀开关">
          <el-switch
            v-model="course.activityCourse"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <template v-if="course.activityCourse">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="course.activityCourseDTO.beginTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="course.activityCourseDTO.endTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="秒杀价">
            <el-input
              v-model.number="course.activityCourseDTO.amount"
              type="number"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="秒杀库存">
            <el-input
              v-model.number="course.activityCourseDTO.stock"
              type="number"
            >
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
        </template>
      </el-card>
      <el-card shadow="never" class="card-content">
        <div slot="header">课程详情</div>
        <text-editor v-model="course.courseDescriptionMarkDown" />
      </el-card>
    </el-form>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { saveOrUpdateCourse, getCourseById } from '@/services/course'
import CourseImage from './image.vue'
import TextEditor from '@/components/TextEditor/index.vue'
import moment from 'moment'
import { Form } from 'element-ui'

export default Vue.extend({
  name: 'CreateOrUpdateCourse',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    courseId: {
      type: [String, Number]
    }
  },
  components: {
    CourseImage,
    TextEditor
  },
  data () {
    return {
      course: {
        courseName: '',
        brief: '',
        teacherDTO: {
          teacherName: '',
          teacherHeadPicUrl: '',
          position: '',
          description: ''
        },
        courseDescriptionMarkDown: '',
        price: null,
        discounts: null,
        priceTag: '',
        discountsTag: '',
        isNew: true,
        isNewDes: '',
        courseListImg: '',
        courseImgUrl: '',
        sortNum: null,
        previewFirstField: '',
        previewSecondField: '',
        status: 0, // 0：未发布，1：已发布
        sales: null,
        activityCourse: false, // 是否开启活动秒杀
        activityCourseDTO: {
          // id: 0,
          // courseId: 0,
          beginTime: '',
          endTime: '',
          amount: 0,
          stock: 0
        },
        autoOnlineTime: ''
      },
      rules: {
        courseName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        brief: [{ required: true, message: '请输入简介', trigger: 'blur' }],
        teacherName: [
          { required: true, message: '请输入讲师名称', trigger: 'blur' }
        ],
        position: [{ required: true, message: '请输入职位', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入讲师简介', trigger: 'blur' }
        ],
        previewFirstField: [
          { required: true, message: '请输入课程概述', trigger: 'blur' }
        ],
        sortNum: [
          { required: true, message: '请输入课程排序', trigger: 'blur' }
        ],
        discounts: [
          { required: true, message: '请输入售卖价格', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    if (this.isEdit) {
      this.loadCourse()
    }
  },
  computed: {
    model () {
      const vm = this as any
      return {
        ...vm.course,
        ...vm.course.teacherDTO
      }
    }
  },
  methods: {
    async loadCourse () {
      const { data } = await getCourseById(this.courseId)
      const { activityCourseDTO } = data.data
      if (activityCourseDTO) {
        activityCourseDTO.beginTime = moment(
          activityCourseDTO.beginTime
        ).format('YYYY-MM-DD')
        activityCourseDTO.endTime = moment(activityCourseDTO.endTime).format(
          'YYYY-MM-DD'
        )
      }
      this.course = data.data
    },

    async handleSave () {
      (this.$refs['course-form'] as Form).validate(async (valid) => {
        if (valid) {
          const { data } = await saveOrUpdateCourse(this.course)
          if (data.code === '000000') {
            this.$message.success('保存成功')
            this.$router.push('/course')
          } else {
            this.$message.error('保存失败')
          }
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.form-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.card-content {
  margin-top: 20px;
}
</style>
